<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="a" style="margin-bottom: 200px">
    <h3>阻止冒泡行为</h3>
    <div style="background-color: red;width: 500px;height: 500px"
         @click="clk2">
        <div style="background-color: green;width: 400px;height: 400px"
             v-on:click.stop="clk1()">
            <div style="background-color: blue;width: 300px;height: 300px;color: #dddddd"
                 v-on:click.stop="nums++" @click.right="nums--">
                {{nums}}
            </div>
        </div>
    </div>

    <h3>按键后缀</h3>
    <input @keypress.enter="alert('enter')"><br>
    <input @keypress.13="alert('13')"><br>

    <h3>阻止默认行为</h3>
    <form action="https://baidu.com">
        <button @click="alert('未阻止button的默认行为')">提交</button>
        <button @click.prevent="alert('未阻止button的默认行为')">提交</button>
    </form>
    <iframe name="ff"></iframe>
    <a href="https://taobao.com" target="ff">淘宝</a>
    <a href="https://taobao.com" target="ff" @click.prevent="showEvent($event)">淘宝</a>
</div>
<script>
    var v = new Vue({
        el: '#a',
        data: {
            nums: 0
        },
        methods: {
            clk1() {
                alert("div1");
            },
            clk2() {
                alert("div2");
            },
            showEvent(e) {
                console.log(e);
            }
        }
    })
</script>
</body>
</html>